<template>
  <div class="home-view">
    <el-button
      @click="startDraw"
      style="position: absolute;z-index: 99;left: 0;"
    >
      开始圈画
    </el-button>
    <SegmentUpload style="position: absolute;z-index: 99;left: 0;top: 100px;" />
    <BKMapDrawer
      position="right"
      top="0"
      bottom="0"
      width="500"
    >
      <div class="full-box bg-white">
        <ConfigGrid
          ref="grid"
          :configs="gridConfigs"
        />
      </div>
      <div class="follower">
        <OperationPanel />
      </div>
      <div class="legend-outer-wrapper">
        <CommonMapLegend :list="legends" />
      </div>
    </BKMapDrawer>
  </div>
</template>

<script>
import OperationPanel from '@/components/geo-map/operation-panel'
import CommonMapLegend from '@/components/geo-map/common-map-legend'
import SegmentUpload from '@/components/service-segment-upload'

export default {
  name: 'Home',
  components: {
    OperationPanel,
    CommonMapLegend,
    SegmentUpload
  },
  data () {
    return {
      legends: [
        { type: 'line', color: 'red', layerId: 'test1', name: '线条' },
        { type: 'rect', color: 'blue', layerId: 'test2', name: '矩形' }
        // { type: 'icon', url: require('@/assets/images/map/legend/task-point.png'), layerId: 'task', name: '任务点', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/store-location.png'), layerId: 'store_location', name: '无人机', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/photo.png'), layerId: 'photo', name: '照片', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/video.png'), layerId: 'video', name: '视频', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/panorama.png'), layerId: 'panorama', name: '720全景', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/orthoimage.png'), layerId: 'orthoimage', name: '正射影像', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/dem.png'), layerId: 'dem', name: 'DEM', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/dsm.png'), layerId: 'dsm', name: 'DSM', groupName: '业务图层' },
        // { type: 'icon', url: require('@/assets/images/map/legend/3d-model.png'), layerId: 'sanwei', name: '实景模型', groupName: '业务图层' }
      ],
      gridConfigs: {
        module: '用户',
        noParentParam: true,
        appId: 'watf',
        bzCode: 'WATF',
        metaSet: 'USER'
      }
    }
  },
  methods: {
    startDraw () {
      this.$mapManager.invoke('showTool')
      this.$mapManager.invoke('startDraw', () => {
      })
    }
  },
  mounted () {
    this.$refs.grid.refreshList()
    setTimeout(async () => {
      const layers = await this.$mapManager.invoke('addLayers', [
        {
          bklayerGroupId: '项目影像',
          bklayerId: 'c407f9ce83664260a3fe238ed349c4f2',
          bklayerName: 'test',
          bklayerSn: 150,
          bklayerType: 'vectorlayer_empty',
          visible: true
        }
      ])
      const color = 'red'
      const point = this.$mapManager.getMapComponent().map1.bkol.getPoint(116, 27)
      const feature = new window.ol.Feature(point)
      const style = new window.ol.style.Style({
        image: new window.ol.style.Circle({
          radius: 4,
          fill: new window.ol.style.Fill({
            color: '#ffffff'
          }),
          stroke: new window.ol.style.Stroke({ color, width: 2 })
        })
      })
      feature.setStyle(style)
      feature.setProperties(Object.assign({ color }))
      layers[0].getSource().addFeature(feature)
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.home-view {
  background: rgb(205, 205, 216);
  padding: 10px 36px;

  .legend-outer-wrapper {
    position: absolute;
    z-index: 111;
    bottom: 8px;
    left: -10px;
    transform: translateX(-100%);
  }

  .follower {
    position: absolute;
    left: -40px;
    top: 0;
    z-index: 99;
    transform: translateX(-100%);
  }
}
</style>
